<template>
	<view class="bg-light" style="height: 100%;">
		<tabsTop tabName="购物车"></tabsTop>
		<gwTitle title="合美供销云平台">
			<view class="pr-2" @click="handleEdit()">{{isEdit?'完成':'编辑'}}</view>
		</gwTitle>
		<!-- 购物车 -->
		<scroll-view scroll-y="true" class="w-100" :style="'height:calc(100vh - 340rpx) '">
			<!-- 商品 -->
			<view class="py-2">
				<view v-for="(item,index) in ShopCar" :key="index"
					class="mx-2 mb-2 py-2 flex align-center bg-white rounded-lg">
					<view class="mx-2 flex-shrink">
						<uni-icons @click="handleSelect(item)" v-if="!item.isSelect" type="circle" color="#28a745"
							size="20"></uni-icons>
						<uni-icons @click="handleSelect(item)" v-else type="checkbox-filled" color="#28a745"
							size="20"></uni-icons>
					</view>
					<view class="mr-2 w-100">
						<view class="flex">
							<view class="flex-shrink rounded overflow-hidden" style="width: 180rpx; height: 180rpx;">
								<image :src="Domain_IMG+item.Picture_URL" class="img" mode=""></image>
							</view>
							<view class="ml-2 flex flex-column justify-between w-100">
								<text>{{item.Article_Name}}</text>
								<view class="flex justify-between">
									<money :money="item.Amount"></money>
									<counter
										@Count="handleCount($event,index,item.Article_SerialNumber,item.Sales_Unit_Price_Stock_SerialNumber)"
										:num="item.Quantity" :max="item.Stock_Remain" :loading="loading">
									</counter>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部操作 -->
		<view class="fixed-bottom shadow flex align-center bg-white" style="height: 110rpx;">
			<!-- 按钮 -->
			<view class="ml-2 flex-shrink flex align-center ">
				<view @click="handleTotalSelect()" class="mr-2 flex-shrink">
					<uni-icons v-if="!isSelect" type="circle" color="#28a745" size="20"></uni-icons>
					<uni-icons v-else type="checkbox-filled" color="#28a745" size="20"></uni-icons>
				</view>
				<text class="font">全选</text>
			</view>
			<!-- 计算 -->
			<view v-if="!isEdit" class="w-100 flex justify-end mr-2">
				<!-- 费用 -->
				<view class="flex flex-column">
					<!-- 合计 -->
					<view class="flex justify-end align-end" style="height: 50%;">
						<text class="font-sm text-muted">不含运费</text>
						<text class="ml-2 font">合计：</text>
						<money :money="totalPrice"></money>
					</view>
					<!-- 优惠 -->
					<view class="flex align-center" style="height: 50%;">
						<text class="font-sm text-muted">共优惠：￥0.00</text>
						<view class="ml-1 px-1 bg-hover-light rounded-circle flex align-center justify-center">
							<text class="font-sm">优惠明细</text>
							<uni-icons type="up" size="12"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view @click="settlement(SelectShopCar)"
					class="ml-2 bg-success px-4 py-2 flex align-center rounded-circle">
					<text class="text-white font">去结算</text>
				</view>
			</view>
			<view v-else class="w-100 flex justify-end mr-2">
				<!-- 按钮 -->
				<view @click="Delete()" class="ml-2 bg-hover-light px-4 py-2 flex align-center rounded-circle">
					<text class="text-muted font">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import gwTitle from "@/components/gwtitle/gwTitle.vue"
	import money from "@/components/tool/money.vue";
	import counter from "@/components/tool/counter.vue";
	import {
		getWX2CheckStockAction
	} from "@/api/article.js"
	import {
		DeleteShopCarQuantity,
		getShopCarAll,
		editWXEditShopCarQuantity
	} from "@/api/article.js"
	import {
		accMul,
		accAdd,
		accSub
	} from "@/static/js/GeneralUtil.js"
	export default {
		components: { //轮播图组件
			tabsTop, //顶部导航栏
			gwTitle, //顶部跳转
			money, //钱样式
			counter, //计数器
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG, //图片地址
				isEdit: false, //编辑
				ShopCar: [], //购物车中商品
				isSelect: true, //全选
				DeleteShopCar: [], //被选择删除
				SelectShopCar: [], //被选中提交
				totalPrice: 0,
				loading: false
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// async getWXShopCarQuantity() {

			// },
			handleEdit() {
				this.isEdit = !this.isEdit
				if (this.isEdit) {
					this.ShopCar.forEach(item => {
						item.isSelect = false
					})
					this.isSelect = false;
				} else {
					this.ShopCar.forEach(item => {
						// item.isSelect = true
						this.$set(item, "isSelect", true)
					})
					this.DeleteShopCar = []; //清空删除
					this.isSelect = true;
				}
			},
			// 修改购物车商品数量
			async editWXEditShopCarQuantity(Article_SerialNumber, Quantity) {
				const res = await editWXEditShopCarQuantity({
					Article_SerialNumber,
					Quantity,
					Open_ID: app.globalData.Open_ID,
					Type: 2
				})
				return res
			},
			async handleCount(e, index, Article_SerialNumber, Sales_Unit_Price_Stock_SerialNumber) { //计算数量
				if (!this.loading) {
					uni.showLoading({
						title: "加载中...",
					});
					this.loading = true;
					if (this.ShopCar[index].Stock_Remain > e) {
						var res = await this.editWXEditShopCarQuantity(Article_SerialNumber, e)
						this.ShopCar[index].Quantity = e;
						this.ShopCar[index].Amount = accMul(e, this.ShopCar[index].Sales_Unit_Price)
						if (res) {
							uni.hideLoading();
							uni.showToast({
								title: '修改成功！',
								icon: 'success'
							})
							this.loading = false;
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '修改失败！',
								icon: 'error',
							})
							this.loading = false;
						}
					}else{
						uni.showToast({
							title: '已达到最大值!',
							icon: 'error',	
						})
						this.$set(this.ShopCar[index],"Quantity",this.ShopCar[index].Stock_Remain)
						await this.editWXEditShopCarQuantity(Article_SerialNumber, this.ShopCar[index].Quantity)
						this.ShopCar[index].Amount = accMul(this.ShopCar[index].Quantity, this.ShopCar[index].Sales_Unit_Price)

						this.loading = false;
					}
				} else {
					uni.showToast({
						title: '正在修改中!!',
						icon: 'error',
					})
					this.loading = false;
				}
				this.getTotalPrice()

			},
			// CountTypeClick(e, Article_SerialNumber) {
			// 	console.log(e, Article_SerialNumber);
			// },
			handleSelect(item) { //选中商品
				item.isSelect = !item.isSelect
				//判断是否全部选中
				if (this.ShopCar.some(item => !item.isSelect)) {
					this.isSelect = false
				} else {
					this.isSelect = true
				}
				if (!this.isEdit) { //选中
					if (item.isSelect) {
						this.SelectShopCar.push(item)
					} else {
						this.SelectShopCar = this.SelectShopCar.filter(i => i.Sales_Order_SerialNumber != item
							.Sales_Order_SerialNumber)
					}
				} else { //删除	
					if (item.isSelect) {
						this.DeleteShopCar.push(item.Sales_Order_SerialNumber)
					} else {
						this.DeleteShopCar = this.DeleteShopCar.filter(i => i != item.Sales_Order_SerialNumber)
					}
				}
				this.getTotalPrice();
			},
			// 获取总价
			getTotalPrice() {
				this.totalPrice = 0
				for (var i = 0; i < this.SelectShopCar.length; i++) {
					this.totalPrice = accAdd(this.SelectShopCar[i].Amount, this.totalPrice)
				}
			},
			handleTotalSelect() {
				this.isSelect = !this.isSelect
				if (!this.isEdit) { //下单
					if (this.isSelect) { //全部选中
						this.ShopCar.forEach(item => {
							item.isSelect = true;
							this.SelectShopCar.push(item)
						})
					} else { //全部取消
						this.ShopCar.forEach(item => {
							item.isSelect = false;
						})
						this.SelectShopCar = []
					}
				} else { //删除
					if (this.isSelect) { //全部选中
						this.ShopCar.forEach(item => {
							item.isSelect = true;
							this.DeleteShopCar.push(item.Sales_Order_SerialNumber)
						})
					} else { //全部取消
						this.ShopCar.forEach(item => {
							item.isSelect = false;
						})
						this.DeleteShopCar = []
					}
				}
				this.getTotalPrice();
			},
			settlement(SelectShopCar) {
				console.log(SelectShopCar, '选中的商品');
				var selectShopCar = encodeURIComponent(JSON.stringify(SelectShopCar))
				uni.navigateTo({
					url: '/pages/shopCart/submitOrder?SelectShopCar=' + selectShopCar + '&totalPrice=' + this
						.totalPrice
				})
			},
			// 获取购物车中的商品
			async getData() {
				const res = await getShopCarAll({
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber
				})
				console.log(res);
				if (res.length > 0) {
					this.ShopCar = res
					this.SelectShopCar = res
				}
				for (var i = 0; i < this.ShopCar.length; i++) {
					this.ShopCar[i].isSelect = true;
					this.getTotalPrice()
				}
				console.log(res, '购物车中的商品');
				return res;
			},
			async Delete() { //购物车批量删除
				uni.showLoading({
					title: "加载中...",
				});
				this.loading = true;
				if (this.DeleteShopCar.length > 0) {
					await DeleteShopCarQuantity({
						Open_ID: app.globalData.Open_ID,
						Sales_Order_SerialNumber: JSON.stringify(this.DeleteShopCar)
					})
					const res = await this.getData();
					if (res.length == 0) {
						this.ShopCar = [];
						this.totalPrice = 0;
						this.SelectShopCar = [];
					} else {
						res.forEach((item, index) => {
							this.$set(this.ShopCar, index, item)
						})
						// this.ShopCar = res
						console.log(this.ShopCar, "购物车");
						this.SelectShopCar = res
						for (var i = 0; i < this.ShopCar.length; i++) {
							this.ShopCar[i].isSelect = false;
							await this.getTotalPrice()
						}
					}
					uni.hideLoading();
					uni.showToast({
						title: '删除成功！',
						icon: 'success'
					})
					this.loading = false;

				} else {
					uni.hideLoading();
					uni.showToast({
						title: '没有选择商品!',
						icon: 'error'
					})
					this.loading = false;
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.shop-cart {
		width: 100%;

		.btn-left {
			padding: 0;
			margin: 0;
			width: 45%;
			border-radius: 0;
			border-top-left-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
			background-color: #383838;
		}

		.btn-right {
			padding: 0;
			margin: 0;
			width: 45%;
			border-radius: 0;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			background-color: #09BB07;
		}
	}
</style>